<template>
	<view class="apply-proxy-page">
		<image src="../../static/images/bg_1.png" mode="widthFix" class="bg-img"></image>
		<view class="main-box">
			<view class="form-item">
				<view class="label is-required">姓名</view>
				<view class="value-box">
					<input type="text" v-model="formData.name" class="input" placeholder-class="placeholder"
						placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">手机号码</view>
				<view class="value-box row-between">
					<input type="text" v-model="formData.phone" class="input" placeholder-class="placeholder"
						placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">希望加盟区域</view>
				<view class="select-box">
					<view @click="openSelect(1)" class="select-item" :class="{'muted':!addPickerValue.province}">
						{{addPickerValue.province.city_name || '请选择省'}}
					</view>
					<view v-if="addPickerValue.province" @click="openSelect(2)" class="select-item"
						:class="{'muted':!addPickerValue.city}">
						{{addPickerValue.city.city_name || '请选择市'}}
					</view>
					<view v-if="addPickerValue.city" @click="openSelect(3)" class="select-item"
						:class="{'muted':!addPickerValue.county}">
						{{addPickerValue.county.city_name || '请选择县'}}
					</view>
					<view v-if="addPickerValue.county" @click="openSelect(4)" class="select-item"
						:class="{'muted':!addPickerValue.town}">
						{{addPickerValue.town.city_name || '请选择乡'}}
					</view>
					<view v-if="addPickerValue.town" @click="openSelect(5)" class="select-item"
						:class="{'muted':!addPickerValue.cun}">
						{{addPickerValue.cun.city_name || '请选择村'}}
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="label is-required">详细地址</view>
				<view class="value-box">
					<input type="text" v-model="formData.addDetails" class="input" placeholder-class="placeholder"
						placeholder="请填写" />
				</view>
			</view>
			<view class="form-item">
				<view class="label-box">意向加盟类型<text class="desc">（*投资有风险，决策需谨慎）</text></view>
				<view class="radio-box">
					<u-radio-group v-model="formData.joinType" placement="row">
						<view class="radio-wrap">
							<view class="radio-item" v-for="(item, index) in typeList" :key="item.id">
								<u-radio :name="item.id">
								</u-radio>
								<text @tap="onClickRadioText(item,index)" class="text"
									:class="formData.joinType === item.id ? 'active' : ''">{{item.name}}</text>
							</view>
						</view>
					</u-radio-group>
				</view>
			</view>
		</view>
		<view class="footer-box">
			<view class="btn active" @tap="onSubmit">提交申请</view>
		</view>

		<!-- 地址选择框 -->
		<u-picker v-if="addPickerShow" mode="selector" v-model="addPickerShow" @confirm="checkedAdd"
			:range="addPickerList" range-key="city_name" :safe-area-inset-bottom="true"></u-picker>

		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		applyGetViper,
		getNextCity,
		postAddViper
	} from '../../../api/user'

	const app = getApp()
	export default {

		data() {
			return {
				typeList: [],
				formData: {
					name: '',
					phone: '',
					addDetails: '',
					joinType: 0,
				},

				addPickerShow: false,
				addPickerList: [],
				addPickerList2: [],
				addPickerListCurr: null,
				addPickerValue: {
					province: null,
					city: null,
					county: null,
					town: null,
					cun: null
				},

			}
		},
		onLoad(options) {

			uni.showLoading({
				title: '获取数据中...'
			})
			applyGetViper().then(async res => {
				if (res.code != 1) return uni.showModal({
					title: '提示',
					content: res.msg,
					success(data) {
						if (data.confirm) {
							uni.navigateBack();
						}
					}
				});
				this.typeList = res.data.type_list;
				this.formData.joinType = res.data.type_list[0].id
				this.addPickerList = res.data.city_list;
				this.addPickerList2 = JSON.parse(JSON.stringify(res.data.city_list));
				uni.hideLoading()
			})
		},
		async onShow() {

		},

		methods: {
			showToast(msg, callback) {
				this.$refs.uToast.show({
					title: msg,
					type: 'defalut',
					callback
				})
			},
			onSubmit() {
				if (!this.formData.name) return this.showToast('请输入姓名');
				let zhengze = /^1[3-9]\d{9}$/;
				if (!this.formData.phone || !zhengze.test(this.formData.phone)) return this.showToast('请输入正确的手机号');
				if (!(this.addPickerValue.province && this.addPickerValue.city && this.addPickerValue.county && this
						.addPickerValue.town && this.addPickerValue.cun)) return this
					.showToast('请选择加盟区域');
				if (!this.formData.addDetails) return this.showToast('请输入详细地址');
				uni.showLoading({
					title: '提交中...'
				})
				postAddViper({
					type: this.formData.joinType,
					real_name: this.formData.name,
					tel: this.formData.phone,
					province: this.addPickerValue.province.id,
					city: this.addPickerValue.city.id,
					district: this.addPickerValue.county.id,
					town: this.addPickerValue.town.id,
					chun: this.addPickerValue.cun.id,
					address: this.formData.addDetails,
					lng: this.addPickerValue.cun.lng,
					lat: this.addPickerValue.cun.lat,
	
					status:this.status
				}).then(res => {
					uni.hideLoading();
					if (res.code != 1) return this.showToast(res.msg);
					console.log(res, 'res')
					this.showToast('提交申请成功', () => {
						uni.navigateBack();
					})
				})
			},

			async getNextCity(id) {
				return await getNextCity({
					id
				})
			},

			onClickRadioText(item, index) {
				this.formData.joinType = item.id
			},

			async openSelect(type) {
				this.addPickerListCurr = type;
				if (this.addPickerListCurr == 1) {
					this.addPickerList = JSON.parse(JSON.stringify(this.addPickerList2))
				} else if (this.addPickerListCurr == 2) {
					if (!this.addPickerValue.province) {
						this.showToast('请先选择省！')
						return;
					}
					const res = await this.getNextCity(this.addPickerValue.province.id)
					if (res.code == 1) {
						this.addPickerList = res.msg
					}
				} else if (this.addPickerListCurr == 3) {
					if (!this.addPickerValue.city) {
						this.showToast('请先选择市！')
						return;
					}
					const res = await this.getNextCity(this.addPickerValue.city.id)
					if (res.code == 1) {
						this.addPickerList = res.msg
					}
				} else if (this.addPickerListCurr == 4) {
					if (!this.addPickerValue.county) {
						this.showToast('请先选择县！')
						return;
					}
					const res = await this.getNextCity(this.addPickerValue.county.id)
					if (res.code == 1) {
						this.addPickerList = res.msg
					}
				} else if (this.addPickerListCurr == 5) {
					if (!this.addPickerValue.town) {
						this.showToast('请先选择乡！')
						return;
					}
					const res = await this.getNextCity(this.addPickerValue.town.id)
					if (res.code == 1) {
						this.addPickerList = res.msg
					}
				}
				this.addPickerShow = true;
			},

			checkedAdd(e) {
				const temp = this.addPickerList[e[0]];
				let curr = this.addPickerListCurr;
				switch (curr) {
					case 1:
						this.addPickerValue.province = temp;
						this.addPickerValue.city = null;
						this.addPickerValue.county = null;
						this.addPickerValue.town = null;
						this.addPickerValue.cun = null;
						break;
					case 2:
						this.addPickerValue.city = temp;
						this.addPickerValue.county = null;
						this.addPickerValue.town = null;
						this.addPickerValue.cun = null;
						break;
					case 3:
						this.addPickerValue.county = temp;
						this.addPickerValue.town = null;
						this.addPickerValue.cun = null;
						break;
					case 4:
						this.addPickerValue.cun = null;
						this.addPickerValue.town = temp;
						break;
					case 5:
						this.addPickerValue.cun = temp;
						break;
				}
				if (curr != 5) {
					this.openSelect(curr + 1)
				}
			}
		},
	}
</script>

<style lang="scss">
	@import "index.scss";

	.select-box {
		flex: 1;
		display: flex;
		flex-wrap: wrap;

		.select-item {
			font-size: 32rpx;
			text-align: left;
		}
	}
</style>